<!-- 用户权限设置 -->
<template>
    <div class="user-role-setting">
        <el-radio-group v-model="currentRole" class="user-role-group">
            <el-radio label="0">所有用户</el-radio>
            <el-radio label="1">特定角色用户</el-radio>
        </el-radio-group>
        <div v-if="currentRole === '1'" class="content-wrap">
            <div v-for="(item, index) in roleData" :key="index" class="item-wrap">
                {{ item['role_name'] }}
                <div class="delete-btn" @click="onDelete(index)">×</div>
            </div>
            <div class="item-wrap add-btn" @click="showRoleDialog = true">
                添加角色
            </div>
        </div>

        <el-dialog
            v-model="showRoleDialog"
            title="添加角色"
            width="480px"
            append-to-body
            @open="onOpen"
        >
            <div class="role-dialog">
                <el-button type="primary" size="small" class="add-btn" @click="onAddUser">后台添加角色</el-button>
                <el-scrollbar max-height="120px">
                    <el-checkbox-group
                        v-model="currentRoleIds"
                        size="small"
                        class="role-dialog-list"
                    >
                        <el-checkbox
                            v-for="(item, index) in roleList"
                            :key="index"
                            :label="item.id"
                            border
                        >
                            {{ item['role_name'] }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-scrollbar>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showRoleDialog = false">取消</el-button>
                    <el-button type="primary" @click="onConfirm">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { defineComponent, toRefs, ref, computed } from 'vue'
import { getUserRoleList } from '@/api/app'
import { openAdmin } from '@/libs/util'
export default defineComponent({
    name: 'UserRoleSetting',
    props: {
        // 用户权限类型(0所有用户，1特定角色用户)
        role: {
            type: String,
            default: '0'
        },
        // 用户权限数据列表
        roleData: {
            type: Array,
            default: () => ([])
        }
    },
    emits: [
        'update:role',
        'update:roleData'
    ],
    setup(props, { emit }) {
        const { role, roleData } = toRefs(props)
        const currentRoleIds = ref([])
        const roleList = ref([])
        const showRoleDialog = ref(false)

        const currentRole = computed({
            get: () => role.value,
            set: val => emit('update:role', val)
        })

        const onOpen = () => {
            currentRoleIds.value = roleData.value.map(item => item.id)
            // 获取用户角色列表
            getUserRoleList().then(res => {
                if (res.Status === 1) {
                    roleList.value = res.Data.map(item => ({
                        'id': item.Id,
                        'role_name': item.RoleName
                    }))
                }
            })
        }

        const onDelete = index => {
            roleData.value.splice(index, 1)
        }

        const onAddUser = () => {
            openAdmin({
                path: 'user-module/user-role-manage'
            })
        }

        const onConfirm = () => {
            const newRoleData = roleList.value.filter(item => currentRoleIds.value.includes(item.id))
            emit('update:roleData', newRoleData)
            showRoleDialog.value = false
        }

        return {
            roleData,
            currentRole,
            currentRoleIds,
            roleList,
            showRoleDialog,

            onOpen,
            onDelete,
            onAddUser,
            onConfirm
        }
    }
})
</script>

<style lang="less" scoped>
.user-role-setting {
    .user-role-group {
        .el-radio {
            display: block;
        }
    }
    .content-wrap {
        background-color: var(--edit-fill-color-light);
        padding: 10px;
        border: 1px solid var(--edit-border-color);
        .item-wrap {
            display: inline-block;
            padding: 7px 10px;
            background-color: var(--edit-color-primary-light-8);
            border: 1px solid var(--edit-color-primary);
            color: var(--edit-color-primary);
            line-height: 12px;
            vertical-align: top;
            margin-right: 7px;
            margin-bottom: 7px;
            .delete-btn {
                display: inline-block;
                margin-left: 5px;
                cursor: pointer;
            }
            &.add-btn {
                background-color: var(--edit-bg-color);
                border-radius: 0;
                border-style: dashed;
                cursor: pointer;
            }
        }
    }
}
.role-dialog {
    .add-btn {
        // margin-bottom: 10px;
    }
    .role-dialog-list {
        .el-checkbox {
            margin: 15px 15px 0 0 !important;
        }
    }
}
</style>